<template>
  <view class="h-screen w-full" style="background-color: #151819;">
    <view class="w-full h-full bg-black transform scale-85 text-white pt-40 flex flex-column flex-nowrap items-center">
      <u--image :showLoading="true" src="../../static/loginLogo.png" width="80px" height="80px"></u--image>
      <text class="fs-56 fs-strong">找回密码</text>
      <!-- 找回密码表单 -->
      <view class="mt-40 w-full p-10">
        <navigator class="fs-40 fs-gold justify-self-start" url="/pages/login/index">返回登录</navigator>

        <!-- 表单 -->
        <u--form :model="formData" :rules="rules" ref="ruleForm">
          <u-form-item prop="stu_code">
            <u--input
              placeholder="学号"
              placeholderStyle="color:#9e9e9e;font-size:40rpx"
              prefixIcon="account-fill"
              prefixIconStyle="font-size: 40px;color: #333;"
              class="login-input"
              v-model="formData.stu_code"
            ></u--input>
          </u-form-item>
          <u-form-item @click="showPassProtect = true" prop="passProtect">
            <u--input
              placeholder="密保问题"
              disabled
              disabledColor="#fafafa"
              placeholderStyle="color:#9e9e9e;font-size:40rpx"
              prefixIcon="question-circle-fill"
              prefixIconStyle="font-size: 40px;color: #333"
              class="login-input"
              v-model="formData.passProtect"
            ></u--input>
          </u-form-item>
          <u-form-item prop="answer">
            <u--input
              placeholder="密保答案"
              placeholderStyle="color:#9e9e9e;font-size:40rpx"
              prefixIcon="lock-fill"
              prefixIconStyle="font-size: 40px;color: #333"
              class="login-input"
              v-model="formData.answer"
            ></u--input>
          </u-form-item>
          <u-form-item prop="newPassword">
            <u--input
              placeholder="新密码"
              placeholderStyle="color:#9e9e9e;font-size:40rpx"
              prefixIcon="lock-fill"
              prefixIconStyle="font-size: 40px;color: #333"
              class="login-input"
              password
              v-model="formData.newPassword"
            ></u--input>
          </u-form-item>
        </u--form>
        <!-- 表单  end -->
        <u-button
          text="找回密码"
          class=""
          size="large"
          color="#c5a767"
          throttleTime="500"
          @click="changePass"
        ></u-button>
      </view>
      <!-- 找回密码表单 end -->
    </view>

    <!-- 选择密保问题 -->
    <u-action-sheet
      :show="showPassProtect"
      :actions="actions"
      title="请选择密保问题"
      @close="showPassProtect = false"
      @select="passProtectSelect"
    ></u-action-sheet>
    <!-- 选择密保问题 end-->
    <!-- 消息提示框 -->
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
export default {
  name: 'ForgetPass',
  data() {
    return {
      formData: {
        stu_code: '',
        passProtect: '',
        answer: '',
        newPassword: ''
      },
      rules: {
        stu_code: [
          {
            type: 'string',
            required: true,
            message: '请填写学号',
            trigger: ['blur']
          },
          {
            pattern: /^20[0-9]{2}10[0-9]{2}[0-1][0-9]{2}/,
            message: '学号格式错误',
            trigger: ['change', 'blur']
          }
        ],
        answer: {
          type: 'string',
          required: true,
          message: '请输入密码',
          trigger: ['blur']
        },
        passProtect: {
          type: 'string',
          require: true,
          message: '请选择密保问题',
          trigger: ['blur', 'change']
        },
        newPassword: [
          {
            type: 'string',
            required: true,
            message: '请填写密码',
            trigger: ['blur']
          },
          {
            min: 6,
            message: '密码长度不能小于6',
            trigger: ['blur', 'change']
          }
        ]
      },
      showPassProtect: false,
      actions: [
        {
          name: '就读的小学'
        },
        {
          name: '生日'
        },
        {
          name: '家乡'
        }
      ]
    };
  },
  methods: {
    passProtectSelect(e) {
      this.formData.passProtect = e.name;
    },
    changePass() {
      this.$refs['ruleForm'].validate().then(async res => {
        let { data } = await uni.$u.http.post('/user/forgetPass', this.formData);
        if (data.code === 200) {
          this.$refs.uToast.show({
            type: 'success',
            icon: false,
            title: '成功',
            message: '成功',
            complete:()=>{
              uni.navigateTo({
                url:'/pages/login/index'
              })
            }
          });
        } else {
          this.$refs.uToast.show({
            type: 'error',
            icon: 'error-circle',
            title: '失败',
            message: '学号或密保错误'
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
.login-input {
  background-color: #fff;
  color: #333;
  height: 112rpx;
  width: 100%;
  margin-bottom: 20rpx;
}

.login-btn {
  border: 0;
  height: 100rpx;
  color: #fff;
  margin-top: 30rpx;
}
</style>
